<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>不能说的秘密</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="frame">
        <div class="nav">
          <ul>
            <li><a class="btn">密码生成器</a></li>
          </ul>
        </div>
        <div class="form-signin">
          <label for="username">生成的密码</label>
          <input
            id="result"
            class="form-styling"
            type="text"
            name="username"
            disabled
            placeholder=""
          />
          <div class="settings">
            <div class="setting">
              <label>密码长度</label>
              <input
                type="number"
                id="passwordLength"
                min="4"
                max="20"
                value="20"
              />
            </div>
            <div class="setting">
              <label>包含大写字母</label>
              <input type="checkbox" value="uppercase" id="uppercase" />
            </div>
            <div class="setting">
              <label>包含小写字母</label>
              <input value="lowercase" type="checkbox" id="lowercase" />
            </div>
            <div class="setting">
              <label>包含数字</label>
              <input value="numbers" type="checkbox" id="numbers" />
            </div>
            <div class="setting">
              <label>包含特殊符号</label>
              <input value="symbols" type="checkbox" id="symbols" />
            </div>
          </div>
          <div class="btn-animate" id="generate">生成密码</div>
        </div>
      </div>
    </div>
    <script src="./js/generatePassword.js"></script>
  </body>
</html>
